<template>
  <div>
    <el-row>
      <label class="row-lable">用户id:</label>
      <el-input style="width:160px" v-model="userId"></el-input>
      <el-button type="primary" @click="jump(1)">搜索</el-button>
    </el-row>

    <el-table :data="tableData" border highlight-current-row stripe style="width: 100%;margin-top: 20px">
      <el-table-column label="用户id" prop="userId"></el-table-column>
      <el-table-column label="用户昵称" prop="nick"></el-table-column>
      <el-table-column label="提现金额" prop="money"></el-table-column>
      <el-table-column label="申请时间" prop="applyTime"></el-table-column>
      <el-table-column label="微信">
        <template slot-scope="scope">
          <template v-if="scope.row.wxNick">
            <img :src="scope.row.wxHeadUrl" style="width:70px;height: 70px;"/>
            {{scope.row.wxNick}}
          </template>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="openPass(scope.row.applyId)">通过</el-button>
          <br>
          <el-button type="text" @click="openRefuse(scope.row.applyId)">不通过</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      @current-change="jump"
      layout="total, prev, pager, next, jumper"
      :pageSize=15
      :total="total">
    </el-pagination>

    <el-dialog title="确认通过" :modal-append-to-body="false" :visible.sync="passShow">
      <div>
        <p> 确认后将从商户余额中打往用户的微信账户。</p>
      </div>
      <span class="el-dialog__footer">
         <el-button type="primary" @click="passApply">确认</el-button>
          <el-button @click="passShow=false">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog title="拒绝" :modal-append-to-body="false" :visible.sync="refuseShow">
      <div>
        <el-input
          type="textarea"
          v-model="reason"
          resize="none">

        </el-input>
      </div>
      <span class="el-dialog__footer">
         <el-button type="primary" @click="refuse">确认</el-button>
          <el-button @click="refuseShow=false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {ajax, examineCash, waitCashList} from "../../data/service";

  export default {
    name: "userList",
    data() {
      return {
        tableData: [],
        page: 1,
        total: 0,
        userId: '',
        passShow: false,
        refuseShow: false,
        applyId: '',
        reason: ''
      }
    },
    mixins: [ajax],
    created() {
      this.loadData();
    },
    methods: {
      loadData() {
        this.doajax(waitCashList,
          {
            userId: this.userId === undefined ? "" : this.userId,
            page: this.page
          },
          resp => {
            this.tableData = resp.data;
            this.total = resp.total;
          }
        );
      },
      jump(val) {
        this.page = val;
        this.loadData();
      },
      openPass(id){
        this.passShow=true;
        this.applyId = id;
      },
      openRefuse(id){
        this.refuseShow=true;
        this.applyId = id;
        this.reason = '';
      },
      passApply() {
        this.doajax(examineCash,
          {
            applyId: this.applyId,
            pass: true
          },
          resp => {
             this.applyId = '';
             this.passShow = false;
             this.loadData();
          }
        );
      },
      refuse(){
        if(!this.reason){
          this.error("请输入理由");
          return;
        }
        this.doajax(examineCash,
          {
            applyId: this.applyId,
            pass: false,
            reason:this.reason
          },
          resp => {
            this.applyId = '';
            this.refuseShow = false;
            this.reason = '';
            this.loadData();
          }
        );

      }
    }
  }
</script>

<style scoped>

</style>
